<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>数据抽取配置</title>

        <link href="css/style.default.css" rel="stylesheet">
        <link href="css/morris.css" rel="stylesheet">
        <link href="css/select2.css" rel="stylesheet" />

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <script src="js/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>

        <header>
            <div class="headerwrapper">
            <!--    <div class="header-left">
                    <a href="index.html" class="logo">

                    </a>
                </div> header-left -->
                <img src="images/logo.png" alt="" />
                

            </div><!-- headerwrapper -->
        </header>

        <section>
            <div class="mainwrapper">
                <div class="leftpanel">
                    <div class="media profile-left">
                        <a class="pull-left profile-thumb" href="profile.html">
                            <img class="img-circle" src="images/photos/profile.png" alt="">
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">Elen Adarna</h4>
                            <small class="text-muted">Beach Lover</small>
                        </div>
                    </div><!-- media -->

                    <h5 class="leftpanel-title">导航</h5>
                    <ul class="nav nav-pills nav-stacked">
                        <li ><a href="index.html"><i class="fa fa-home"></i> <span>主页</span></a></li>

                         <li class="parent"><a href=""><i class="fa fa-bars"></i> <span>信息查询</span></a>
                            <ul class="children">
                                <li><a href="search.html">日志查询</a></li>
                            </ul>
                        </li>
                         <li class="parent"><a href=""><i class="fa fa-edit"></i> <span>统计</span></a>
                            <ul class="children">
                                <li><a href="tj_yhbl.html">用户比例统计</a></li>
                            </ul>
                            <ul class="children">
                                <li><a href="tj_yhpm.html">用户排名统计</a></li>
                            </ul>
                            <ul class="children">
                                <li><a href="tj_bbl.html">表比例统计</a></li>
                            </ul>
                            <ul class="children">
                                <li><a href="tj_bpm.html">表排名统计</a></li>
                            </ul>
                        </li>
                        <li class="parent"><a href=""><i class="fa fa-exclamation-circle"></i> <span>警告通知</span></a>
                        	<ul class="children">
                                <li ><a href="czplsz.html">操作频率设置</a></li>
                                <li><a href="czjlssz.html">操作记录数设置</a></li>
                                <li><a href="tzck.html">通知查看</a></li>
                            </ul>
                        </li>
                        <li  class="parent active"><a href=""><i class="fa fa-cogs"></i> <span>系统管理</span></a>
                            <ul class="children">
                                <li ><a  href="user.html">用户管理</a></li>
                                <li><a href="jdck.html">节点查看</a></li>
                                 <li class="active"><a href="tbEtl.html">数据抽取配置</a></li>
                            </ul>
                        </li>

                    </ul>

                </div><!-- leftpanel -->

                               <div class="mainpanel">
                    <div class="pageheader">
                        <div class="media">
                          <!--   <div class="pageicon pull-left">
                                <i class="fa fa-envelope-o"></i>
                            </div> -->
                            <div class="media-body">
                              <!--   <ul class="breadcrumb">
                                    <li><a href=""><i class="glyphicon glyphicon-home"></i></a></li>
                                    <li>Messages</li>
                                </ul> -->
                                <h4 style="margin-top:10px;">数据抽取配置</h4>
                            </div>
                        </div><!-- media -->
                    </div><!-- pageheader -->

                    <div class="contentpanel">
                        <div class="row">


                            <div class="col-sm-9 col-md-9 col-lg-10" style="width:100%;">

                                <div  class="msg-header" style="margin-bottom: 4px;margin-top: -12px;">
                                    <!-- 分页 -->
                                    <div  class="pull-right">
                                       <div  id="paginator"></div>
                                    </div>
                                    <div style="margin-top:21px;"  class="pull-left">
                                        <button onclick="addTable();" class="btn btn-white tooltips" type="button" data-toggle="tooltip" title="添加规则"><i class="fa   fa-plus"></i></button>
                                        <button onclick="deleteTable();" class="btn btn-white tooltips" type="button" data-toggle="tooltip" title="删除规则"><i class="fa fa-trash-o"></i></button>
                                    </div><!-- pull-right -->
                                </div><!-- msg-header -->
                                 <div class="col-md-6 " style="padding-left:0px;padding-right:0px;width:100%">
                                <div class="table-responsive">
                                    <table id="dataTable" class="table table-info mb30">
                                        <thead>
                                          <tr>
                                            <th width="10%">选择</th>
                                            <th width="15%">表名</th>
                                            <th width="25%">添加时间</th>
                                            <th width="25%">数据时间</th>
                                            <th width="25%">抽取时间</th>
                                          </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div><!-- table-responsive -->
                            </div>

                            </div>
                        </div>
                    </div><!-- contentpanel -->

                </div><!-- mainpanel -->
            </div><!-- mainwrapper -->
        </section>
        <script src="js/jquery-1.11.1.min.js"></script>


        <script src="js/jquery-migrate-1.2.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/bootstrap-paginator.min.js"></script>
        <script src="js/modernizr.min.js"></script>
        <script src="js/pace.min.js"></script>
        <script src="js/retina.min.js"></script>
        <script src="js/jquery.cookies.js"></script>

        <script src="js/jquery.sparkline.min.js"></script>
        <script src="js/morris.min.js"></script>
        <script src="js/raphael-2.1.0.min.js"></script>
        <script src="js/bootstrap-wizard.min.js"></script>
        <script src="js/select2.min.js"></script>

        <script src="js/custom.js"></script>
        <script type="text/javascript">
        function showETL(){
        	$.ajax({
			type : "POST",
			url : "./CxtjController/getETL.do",
			data : {page:"1"},
			dataType : "json",
			success : function(data) {
			$("#dataTable tr:not(:first)").empty();
			for (var o in data.datas) {
								// alert(data.grxx[o].zzmc);
								       $('#dataTable').append('<tr>'+
                                            '<td><div class="ckbox ckbox-primary pull-left">'+
                                            '<input type="checkbox" id="'+data.datas[o].id+'">'+
                                            '<label for="'+data.datas[o].id+'"></label>'+
                                        '</div></td>'+
                                            '<td>'+data.datas[o].table_name+'</td>'+
                                            '<td>'+toFormatTime(data.datas[o].create_time)+'</td>'+
                                            '<td>'+toFormatTime(data.datas[o].data_time)+'</td>'+
                                            '<td>'+toFormatTime(data.datas[o].etl_time)+'</td>'+
                                          '</tr>');
								}
			var options = {
								currentPage : 1, //当前页
								totalPages :data.totalPage, //总页数
								numberofPages:5, //显示的页数

								 itemTexts : function(type, page, current) { //修改显示文字
									switch (type) {
									case "first":
										return "第一页";
									case "prev":
										return "上一页";
									case "next":
										return "下一页";
									case "last":
										return "最后一页";
									case "page":
										return page;
									};
								},
								onPageClicked : function(event, originalEvent, type, page) { //异步换页
			$.ajax({
			type : "POST",
			url : "./CxtjController/getETL.do",
			data : {page:page},
			dataType : "json",
			// jsonp:'jsonpCallback',
			success : function(data) {
			$("#dataTable tr:not(:first)").empty();
			for (var o in data.datas) {
								// alert(data.grxx[o].zzmc);
								       $('#dataTable').append('<tr>'+
                                           '<td><div class="ckbox ckbox-primary pull-left">'+
                                            '<input type="checkbox" id="'+data.datas[o].id+'">'+
                                            '<label for="'+data.datas[o].id+'"></label>'+
                                        '</div></td>'+
                                            '<td>'+data.datas[o].table_name+'</td>'+
                                            '<td>'+toFormatTime(data.datas[o].create_time)+'</td>'+
                                            '<td>'+toFormatTime(data.datas[o].data_time)+'</td>'+
                                            '<td>'+toFormatTime(data.datas[o].etl_time)+'</td>'+
                                          '</tr>');
								}
								}
								})
								}
							};
							 $("#paginator").bootstrapPaginator(options);
							  $("#paginator ul").attr("class","pagination pagination-split pagination-circled nomargin");
                            $("#paginator").bind('DOMNodeInserted', function(e) {
                                   $("#paginator ul").attr("class","pagination pagination-split pagination-circled nomargin");
                           });

			}
			});
        }
	$(function() {
        showETL();
	});

		function addTable(){
		$("input").val('');
		$("input[name='username']").removeAttr("disabled");
		$('#addModal').modal('show');
		}

		function deleteTable(){
            var id_array=new Array();
            $('input[type="checkbox"]:checked').each(function(){
                id_array.push($(this).attr('id'));//向数组中添加元素
            });
            if(id_array.length>0){
            var msg = "您真的确定要删除吗？\n\n请确认！";
            if (confirm(msg)==true){
              $.ajax({
            			type : "POST",
            			url : "./CxtjController/delETL.do",
            			data : {
            			id:id_array.join(",")
            			},
            			dataType : "json",
            			// jsonp:'jsonpCallback',
            			success : function(data) {
            			showETL();
            			}
            			});

             }else{ return false; }

            }
		}

		function saveTable(){
            var bm=$("input[name='bm']").val();
            var usernm=$("#yhm").val();
            var zsm=$("#cnName").val();
        if(bm !=null && bm!='' && zsm!=null && zsm!='' ){
		 $.ajax({
			type : "POST",
			url : "./CxtjController/addETL.do",
			data : {
			tablename:bm,
            username:usernm,
            cnname:zsm
			},
			dataType : "json",
			success : function(data) {
               if(data.status!=0){
                    document.getElementById("deleteInfo").innerHTML=data.message;
                }
                else{
                showETL();
                $('#addModal').modal('hide');
			     }
                }
			});

        }
        else{
            document.getElementById("deleteInfo").innerHTML="信息填写不完整";

        }
		}

		function toFormatTime(dateTime){
            if(dateTime== null || dateTime == '') return 'null';
			var dateStr=new Date(dateTime).toLocaleString();
            return dateStr;
		}

	</script>

	<div id="addModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">添加你要抽取的表</h4>
      </div>
      <div class="modal-body">
       <div class="form-group">
                 <label style="width:18.3%" class="col-sm-4 control-label">带&nbsp;<font color="#FF0000">*</font>&nbsp;为必填项</label>
                 <div class="col-sm-8">
                        <label style="color:#FF0000" id="deleteInfo"></label>
                    </div>
                </div>
                <div class="form-group">
                 <label style="width:18.3%" class="col-sm-4 control-label">描述:</label>
                    <div class="col-sm-8">
                        <input id="cnName" type="text" placeholder="" class="form-control">
                    </div>
                </div>
               <div class="form-group">
                    <label style="width:18.3%" class="col-sm-4 control-label">表名<font color="#FF0000">*</font>:</label>
                    <div class="col-sm-8">
                        <input name="bm" type="text" placeholder="" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label style="width:18.3%" class="col-sm-4 control-label">用户名<font color="#FF0000">*</font>:</label>
                    <div class="col-sm-8">
                        <input id="yhm" type="text" placeholder="" class="form-control">
                    </div>
                </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button onclick="saveTable();" type="button" class="btn btn-primary">保存</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
    </body>
</html>
